<template>
  <view class="main">
    <image src="https://ydh5res.onlineweixin.com/cy/prop_files/bg.png" alt="" class="mainBg"
           style="pointer-events: none;"></image>
    <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/title.png?v=1" alt="" class="title"></image>
    <view class="content">
      <image src="https://ydh5res.onlineweixin.com/cy/prop_files/box.png" alt="" class="contentBg"
             style="pointer-events: none;"></image>

      <view class="contentMain">
        <view class="progress-wrap">
          <view class="progress-title">{{ text[textIndex] }}</view>
          <view class="progress-bar">
            <text class="pao" :style="{width: pao+'%'}"></text>
          </view>
        </view>

        <view v-if="page1" class="tableBox">
          <view class="tableRow">
            <view class="th">
              <view class="tableItem " v-show="page1List[5].first">
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[5].first}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[5].third}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/5.png" alt="" class="tableItemZodiac "
                       :class="{'active':page1List[5].second}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/5x.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[5].third}"></image>
                <view class="tableItemTxt ">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt="" class="tableItemTxtBg"
                         :class="{'active':page1List[5].first}"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[5].third"></image>
                  <view class="tableItemTxtTxt" :class="{'active':page1List[5].first}">巨蟹</view>
                </view>
                <view class="tableItemTxt active">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt="" class="tableItemTxtBg"
                         :class="{'active':page1List[5].second}"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[5].third"></image>
                  <view class="tableItemTxtTxt" :class="{'active':page1List[5].first}">巳蛇</view>
                </view>
              </view>
            </view>
            <view class="th">
              <view class="tableItem " v-show="page1List[6].first">
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[6].first}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[6].third}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/6.png" alt="" class="tableItemZodiac "
                       :class="{'active':page1List[6].second}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/6x.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[6].third}"></image>
                <view class="tableItemTxt ">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[6].third"></image>
                  <view class="tableItemTxtTxt">狮子</view>
                </view>
                <view class="tableItemTxt active">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[6].third"></image>
                  <view class="tableItemTxtTxt">午马</view>
                </view>
              </view>
            </view>
            <view class="th">
              <view class="tableItem " v-show="page1List[7].first">
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[7].first}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[7].third}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/7.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[7].second}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/7x.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[7].third}"></image>
                <view class="tableItemTxt ">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[7].third"></image>
                  <view class="tableItemTxtTxt">处女</view>
                </view>
                <view class="tableItemTxt active">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[7].third"></image>
                  <view class="tableItemTxtTxt">未羊</view>
                </view>
              </view>
            </view>
            <view class="th">
              <view class="tableItem " v-show="page1List[8].first">
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[8].first}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[8].third}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/8.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[8].second}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/8x.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[8].third}"></image>
                <view class="tableItemTxt ">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[8].third"></image>
                  <view class="tableItemTxtTxt">天蝎</view>
                </view>
                <view class="tableItemTxt active">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[8].third"></image>
                  <view class="tableItemTxtTxt">申猴</view>
                </view>
              </view>
            </view>
          </view>
          <view class="tableRow">
            <view class="th">
              <view class="tableItem " v-show="page1List[4].first">
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[4].first}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[4].third}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/4.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[4].second}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/4x.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[4].third}"></image>
                <view class="tableItemTxt ">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[4].third"></image>
                  <view class="tableItemTxtTxt">双子</view>
                </view>
                <view class="tableItemTxt active">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[4].third"></image>
                  <view class="tableItemTxtTxt">辰龙</view>
                </view>
              </view>
            </view>
            <view class="th">
              <view class="tableItem " v-show="page1List[9].first">
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[9].first}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[9].third}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/9.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[9].second}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/9x.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[9].third}"></image>
                <view class="tableItemTxt  ">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[9].third"></image>
                  <view class="tableItemTxtTxt">天蝎</view>
                </view>
                <view class="tableItemTxt  active">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[9].third"></image>
                  <view class="tableItemTxtTxt">酉鸡</view>
                </view>
              </view>
            </view>
          </view>
          <view class="tableRow">
            <view class="th">
              <view class="tableItem " v-show="page1List[3].first">
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[3].first}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[3].third}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/3.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[3].second}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/3x.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[3].third}"></image>
                <view class="tableItemTxt ">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[3].third"></image>
                  <view class="tableItemTxtTxt">金牛</view>
                </view>
                <view class="tableItemTxt active">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[3].third"></image>
                  <view class="tableItemTxtTxt">卯兔</view>
                </view>
              </view>
            </view>
            <view class="th">
              <view class="tableItem " v-show="page1List[10].first">
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[10].first}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[10].third}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/10.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[10].second}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/10x.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[10].third}"></image>
                <view class="tableItemTxt ">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[10].third"></image>
                  <view class="tableItemTxtTxt">射手</view>
                </view>
                <view class="tableItemTxt active">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[10].third"></image>
                  <view class="tableItemTxtTxt">戌狗</view>
                </view>
              </view>
            </view>
          </view>
          <view class="tableRow">
            <view class="th">
              <view class="tableItem " v-show="page1List[2].first">
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[2].first}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[2].third}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/2.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[2].second}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/2x.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[2].third}"></image>
                <view class="tableItemTxt ">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[2].third"></image>
                  <view class="tableItemTxtTxt">白羊</view>
                </view>
                <view class="tableItemTxt active">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[2].third"></image>
                  <view class="tableItemTxtTxt">寅虎</view>
                </view>
              </view>
            </view>
            <view class="th">
              <view class="tableItem " v-show="page1List[1].first">
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[1].first}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[1].third}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/1.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[1].second}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/1x.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[1].third}"></image>
                <view class="tableItemTxt start14">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[1].third"></image>
                  <view class="tableItemTxtTxt">双鱼</view>
                </view>
                <view class="tableItemTxt active">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[1].third"></image>
                  <view class="tableItemTxtTxt">丑牛</view>
                </view>
              </view>
            </view>
            <view class="th">
              <view class="tableItem " v-show="page1List[0].first">
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[0].first}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[0].third}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/0.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[0].second}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/0x.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[0].third}"></image>
                <view class="tableItemTxt ">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[0].third"></image>
                  <view class="tableItemTxtTxt">水瓶</view>
                </view>
                <view class="tableItemTxt active">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[0].third"></image>
                  <view class="tableItemTxtTxt">子鼠</view>
                </view>
              </view>
            </view>
            <view class="th">
              <view class="tableItem " v-show="page1List[11].first">
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[11].first && !page1List[11].third}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt="" class="tableItemBg"
                       :class="{'active':page1List[11].third}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/11.png" alt="" class="tableItemZodiac "
                       :class="{'active':page1List[11].second}"></image>
                <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/11x.png" alt="" class="tableItemZodiac"
                       :class="{'active':page1List[11].third}"></image>
                <view class="tableItemTxt ">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg" v-if="!page1List[11].third"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[11].third"></image>
                  <view class="tableItemTxtTxt">摩羯</view>
                </view>
                <view class="tableItemTxt active">
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
                         class="tableItemTxtBg" v-if="!page1List[11].third"></image>
                  <image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt="" class="tableItemTxtBg"
                         v-if="page1List[11].third"></image>
                  <view class="tableItemTxtTxt">亥猪</view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view v-if="page2" class="tableCenter">
          <view class="tableCenterTxt" :class="{'active':page2List[0] }">
            <text>姓名：</text>
            {{ name }}
          </view>
          <view class="tableCenterTxt" :class="{'active':page2List[1] }">
            <text>性别：</text>
            {{ sex == 1?'男':'女' }}
          </view>
          <view class="tableCenterTxt" :class="{'active':page2List[2] }">
            <text>生日：</text>
            阳历
            {{ birthday.yy }}年{{ birthday.mm }}月{{ birthday.dd }}日 {{ birthday.hh }}时
          </view>
        </view>

        <view v-if="page3" class="info2 info8">
          <view class="zs"></view>
          <view class="item" :class="{'active':page3List[0]}">
            <view class="tit">年</view>
            <view class="inf">
              <view>幻</view>
              <view>猪</view>
            </view>
          </view>
          <view class="item " :class="{'active':page3List[1]}">
            <view class="tit">月</view>
            <view class="inf">
              <view>幻</view>
              <view>鸡</view>
            </view>
          </view>
          <view class="item " :class="{'active':page3List[2]}">
            <view class="tit">日</view>
            <view class="inf">
              <view>幻</view>
              <view>牛</view>
            </view>
          </view>
          <view class="item " :class="{'active':page3List[3]}">
            <view class="tit">时</view>
            <view class="inf">
              <view>伤</view>
              <view>龙</view>
            </view>
          </view>
        </view>
        <view v-if="page4" class="info2 info4">
          <view class="zs"></view>
          <view class="item item12" :class="{'active':page4List[0]}">
            <view class="tit">幻</view>
            <view class="inf">
              <view></view>
              <view></view>
            </view>
          </view>
          <view class="item item13" :class="{'active':page4List[1]}">
            <view class="tit">幻</view>
            <view class="inf">
              <view></view>
              <view></view>
            </view>
          </view>
          <view class="item item14" :class="{'active':page4List[2]}">
            <view class="tit">幻</view>
            <view class="inf">
              <view></view>
              <view></view>
            </view>
          </view>
          <view class="item item15" :class="{'active':page4List[3]}">
            <view class="tit">伤</view>
            <view class="inf">
              <view></view>
              <view></view>
            </view>
          </view>
        </view>
        <view v-if="page5" class="info2 info4">
          <view class="zs"></view>
          <view class="item item12" :class="{'active':page5List[0]}">
            <view class="tit">猪</view>
            <view class="inf">
              <view></view>
              <view></view>
            </view>
          </view>
          <view class="item item13" :class="{'active':page5List[1]}">
            <view class="tit">鸡</view>
            <view class="inf">
              <view></view>
              <view></view>
            </view>
          </view>
          <view class="item item14" :class="{'active':page5List[2]}">
            <view class="tit">牛</view>
            <view class="inf">
              <view></view>
              <view></view>
            </view>
          </view>
          <view class="item item15" :class="{'active':page5List[3]}">
            <view class="tit">龙</view>
            <view class="inf">
              <view></view>
              <view></view>
            </view>
          </view>
        </view>

        <view v-if="page6" class="info2 info5">
          <view class="zs"></view>
          <view class="item item16" :class="{'active':page6List[3]}">
            <view class="tit"></view>
            <view class="inf">
              <view></view>
              <view></view>
            </view>
          </view>
          <view class="item item17" :class="{'active':page6List[3]}">
            <view class="tit"></view>
            <view class="inf">
              <view></view>
              <view></view>
            </view>
          </view>
          <view class="item item18" :class="{'active':page6List[3]}">
            <view class="tit"></view>
            <view class="inf">
              <view></view>
              <view></view>
            </view>
          </view>
          <view class="item item19" :class="{'active':page6List[3]}">
            <view class="tit"></view>
            <view class="inf">
              <view></view>
              <view></view>
            </view>
          </view>
        </view>

        <view v-if="page7" class="info1 info6">
          <view class="item item20" :class="{'active':page7List[0]}">
            <view class="key">主情绪：</view>
          </view>
          <view class="item item21" :class="{'active':page7List[1]}">
            <view class="key"><span>易现内色： 惊</span></view>
          </view>
        </view>

        <view v-if="page8" class="info0 info7">
          <view class="item item22" :class="{'active':page8List[0]}">
            <view class="key" style="text-align: left; padding-left: 0.2rpx;">发展格局的建议已经完善
            </view>
          </view>
          <view class="item item23" :class="{'active':page8List[1]}">
            <view class="key" style="text-align: left; padding-left: 0.2rpx;">所有结果分析完毕
            </view>
          </view>
        </view>

        <view v-if="page9" class="rotate">
          <image src="https://ydh5res.onlineweixin.com/cy/prop_files/waibg.png" alt="" class="waibg"
                 style="pointer-events: none;"></image>
          <image src="https://ydh5res.onlineweixin.com/cy/prop_files/waichoose.png" alt="" :class="{'active':tgchoose}"
                 class="dzchoose" style="pointer-events: none; "></image>
          <view class="dz" :style="{transform: 'rotate('+xuanzhuan1+'deg)'}" :class="{'active':xuanzhuanState1}">
            <view style="transform: rotate(0deg);">鼠</view>
            <view style="transform: rotate(30deg);">牛</view>
            <view style="transform: rotate(60deg);">虎</view>
            <view style="transform: rotate(90deg);">兔</view>
            <view style="transform: rotate(120deg);">龙</view>
            <view style="transform: rotate(150deg);">蛇</view>
            <view style="transform: rotate(180deg);">马</view>
            <view style="transform: rotate(210deg);">羊</view>
            <view style="transform: rotate(240deg);">猴</view>
            <view style="transform: rotate(270deg);">鸡</view>
            <view style="transform: rotate(300deg);">戌</view>
            <view style="transform: rotate(330deg);">猪</view>
          </view>
          <image src="https://ydh5res.onlineweixin.com/cy/prop_files/zhongbg.png" alt="" class="cenbg"></image>
          <image
              src="https://ydh5res.onlineweixin.com/cy/prop_files/zhongchoose.png" alt="" class="tgchoose"
              :class="{'active':dzchoose}"
          ></image>
          <view class="tg" :style="{transform: 'rotate('+xuanzhuan2+'deg)'}" :class="{'active':xuanzhuanState2}">
            <view style="transform: rotate(0deg);">喜</view>
            <view style="transform: rotate(36deg);">幻</view>
            <view style="transform: rotate(72deg);">哀</view>
            <view style="transform: rotate(108deg);">乐</view>
            <view style="transform: rotate(144deg);">狗</view>
            <view style="transform: rotate(180deg);">恐</view>
            <view style="transform: rotate(216deg);">伤</view>
            <view style="transform: rotate(252deg);">爱</view>
            <view style="transform: rotate(288deg);">惊</view>
            <view style="transform: rotate(324deg);">羞</view>
          </view>
          <image src="https://ydh5res.onlineweixin.com/cy/prop_files/neibg.png" alt="" class="neibg"></image>
          <view class="nyr">
            <view style="transform: rotate(0deg);">年</view>
            <view style="transform: rotate(90deg);">月</view>
            <view style="transform: rotate(180deg);">日</view>
            <view style="transform: rotate(270deg);">时</view>
          </view>
          <image src="https://ydh5res.onlineweixin.com/cy2/prop_files/xing2.png" alt="" class="xin"></image>
        </view>
      </view>


    </view>
  </view>
</template>

<script>
import {toPage} from "../../tools";

export default {
  data() {
    return {
      name: '',
      sex: '',
      birthday: '',
      zodiac: '',
      zodiacNumber: 0,
      animationData: {
        bazi: [],
        tiangan: [],
        shishen: [],
        dizhi: [],
        dizhi_shishen: [],
        zanggan: [],
        zanggan_shishen: [],
      },


      page1: false,
      page2: false,
      page3: false,
      page4: false,
      page5: false,
      page6: false,
      page7: false,
      page8: false,
      page9: false,

      text: ['正在录入你的基本信息...', '正在录入你的基本信息...', '正在生成适合你的人生建议...', '正在生成适合你的情感建议...', '正在生成适合你的事业建议...', '正在生成适合你的健康建议...', '正在录入生成你的最终报告结果...', '正在录入生成你的最终报告结果...'],
      textIndex: 0,
      pao: 0,
      page1List: [
        {first: false, second: false, third: false},
        {first: false, second: false, third: false},
        {first: false, second: false, third: false},
        {first: false, second: false, third: false},
        {first: false, second: false, third: false},
        {first: false, second: false, third: false},
        {first: false, second: false, third: false},
        {first: false, second: false, third: false},
        {first: false, second: false, third: false},
        {first: false, second: false, third: false},
        {first: false, second: false, third: false},
        {first: false, second: false, third: false}
      ],
      page2List: [
        false,
        false,
        false
      ],
      page3List: [
        false, false, false, false,
      ],
      page4List: [
        false, false, false, false,
      ],
      page5List: [
        false, false, false, false,
      ],
      page6List: [
        false, false, false, false,
      ],
      page7List: [
        false, false
      ],
      page8List: [
        false, false
      ],

      tgchoose: false,
      dzchoose: false,

      dz: [
        {ind: 1, val: '鼠'},
        {ind: 2, val: '牛'},
        {ind: 3, val: '虎'},
        {ind: 4, val: '兔'},
        {ind: 5, val: '龙'},
        {ind: 6, val: '蛇'},
        {ind: 7, val: '马'},
        {ind: 8, val: '羊'},
        {ind: 9, val: '猴'},
        {ind: 10, val: '鸡'},
        {ind: 11, val: '狗'},
        {ind: 12, val: '猪'},
      ],
      tg: [
        {ind: 1, val: '喜'},
        {ind: 2, val: '幻'},
        {ind: 3, val: '哀'},
        {ind: 4, val: '乐'},
        {ind: 5, val: '恐'},
        {ind: 6, val: '悲'},
        {ind: 7, val: '伤'},
        {ind: 8, val: '爱'},
        {ind: 9, val: '惊'},
        {ind: 10, val: '羞'},
      ],
      zi: ['龙乐', '牛伤', '鸡惊', '蛇爱'],

      xuanzhuan1: {},
      xuanzhuan2: {},
      xuanzhuanState1: true,
      xuanzhuanState2: true,
    };
  },
  onLoad(options) {
    this.birthday = JSON.parse(options.birthday);
    this.name = options.username
    this.zodiac = options.zodiac
    this.oid = options.oid
    this.sex = Number(options.gender)

    let ret = JSON.parse('{"result":{"username":"天空","sex":"' + (this.sex === 1 ? 1 : 0) + '","zodiac":"' + this.zodiac + '","birthday":["1995年10月01日 7时","1995年闰八月初七 龙时"],"bazi":["幻","猪","幻","鸡","幻","牛","伤","龙"],"wuxing":["悲","乐","悲","喜","悲","惊","喜","惊"],' +
        '"siji":"","wx_que":["土"],"wx_wang":["水"],"wx_num":["23.08","38.46","23.08","0.00","15.38"],"wxwd":["\u91d1","\u6c34","\u571f","\u706b","\u6728"],"dizhi":["猪","鸡","牛","龙"],"tiangan":["幻","幻","幻","伤"],"xiyongshen":"\u706b","shishen":["\u6bd4\u80a9","\u6bd4\u80a9","\u65e5\u5143","\u6b63\u5b98"],"dizhi_shishen":["\u504f\u5370","\u6bd4\u80a9","\u6b63\u5b98","\u6bd4\u80a9"],"nayin":[{"jiazi":"\u4e59\u4ea5","layin":"\u5c71\u5934\u706b"},{"jiazi":"\u4e59\u9149","layin":"\u4e95\u6cc9\u6c34"},{"jiazi":"\u4e59\u4e11","layin":"\u6d77\u4e2d\u91d1"},{"jiazi":"\u5e9a\u8fb0","layin":"\u767d\u814a\u91d1"}],"zanggan":[["\u58ec","\u7532",""],["\u8f9b","",""],["\u7678","\u5df1","\u8f9b"],["\u4e59","\u620a","\u7678"]],"zanggan_shishen":[["\u6b63\u5370","\u52ab\u8d22",""],["\u504f\u5b98","",""],["\u504f\u5370","\u504f\u8d22","\u504f\u5b98"],["\u6bd4\u80a9","\u6b63\u8d22","\u504f\u5370"]],"pattern":"\u504f\u5b98","dayun":{"year":"","month":""},"dayun_time":["\u7532\u7533","\u7678\u672a","\u58ec\u5348","\u8f9b\u5df3","\u5e9a\u8fb0","\u5df1\u536f","\u620a\u5bc5"],"datetype":null}}');
    let rea = ret.result;
    this.animationData = rea;
    this.zi = [
      this.animationData.dizhi[0] + this.animationData.tiangan[0],
      this.animationData.dizhi[1] + this.animationData.tiangan[1],
      this.animationData.dizhi[2] + this.animationData.tiangan[2],
      this.animationData.dizhi[3] + this.animationData.tiangan[3]
    ];
    this.analyse(options.zodiac)
  },
  onShow() {
    this.getOrderInfo()

    this.start()

  },
  methods: {

    getOrderInfo() {

    },

    start() {
      this.textIndex = 0
      this.page2 = true
      this.paoNum(20000)
      setTimeout(() => {
        this.$set(this.page2List, 0, true)
      }, 100)
      setTimeout(() => {
        this.$set(this.page2List, 1, true)
      }, 500)
      setTimeout(() => {
        this.$set(this.page2List, 2, true)
      }, 1000)
      this.page1 = true
      let _num = 0
      let _timer = setInterval(() => {
        if (_num > 11) {
          clearInterval(_timer)
          this.start1()
        }
        this.$set(this.page1List, _num, {first: true, second: false, third: false},)
        _num++
      }, 100)
      this.page1 = true
    },
    start1() {
      let _num = 0
      let _timer = setInterval(() => {
        if (_num > 11) {
          clearInterval(_timer)
        }
        this.$set(this.page1List, _num, {first: true, second: true, third: false})
        _num++
      }, 150)
      setTimeout(() => {
        this.$set(this.page1List, (this.zodiacNumber - 1), {first: true, second: false, third: true})
      }, 1800)
      setTimeout(() => {
        this.page1 = false
        this.page2 = false
        this.page3 = true
        this.page9 = true
        this.textIndex = 1
        this.paoNum(80000)
        this.rotate()
      }, 2500)
    },

    rotate() {

      let _this = this;
      _this.xuanzi(_this.zi[0][0], _this.zi[0][1]);
      setTimeout(() => {
        _this.showchoose(true);
        this.$set(this.page3List, 0, true)
      }, 1000)

      setTimeout(() => {
        _this.xuanzi(_this.zi[1][0], _this.zi[1][1]);
        setTimeout(() => {
          _this.showchoose(true);
          this.$set(this.page3List, 1, true)
        }, 1000);
      }, 2000);

      setTimeout(() => {
        _this.xuanzi(_this.zi[2][0], _this.zi[2][1]);
        setTimeout(() => {
          _this.showchoose(true);
          this.$set(this.page3List, 2, true)
        }, 1000);
      }, 4000);

      setTimeout(() => {
        _this.xuanzi(_this.zi[3][0], _this.zi[3][1]);
        setTimeout(() => {
          _this.showchoose(false);
          this.$set(this.page3List, 3, true)
        }, 1000);
      }, 6000);


    },
    showchoose(state) {
      this.tgchoose = true
      this.dzchoose = true
      this.xuanzhuanState1 = false
      this.xuanzhuanState2 = false
      setTimeout(() => {
        this.tgchoose = false
        this.dzchoose = false
        if (!state) {
          this.xuanzhuanState1 = true
          this.xuanzhuanState2 = true
          this.page4 = true
          this.page3 = false
          this.textIndex++
          this.start4()
        }

      }, 500);
    },

    xuanzi(val1, val2) {
      let index1 = this.dz.findIndex((item) => {
        return item.val == val1;
      })
      let index2 = this.tg.findIndex((item) => {
        return item.val == val2;
      })
      let zhuan1 = (this.dz[index1].ind - 1) * 30;
      let zhuan2 = 360 - (this.tg[index2].ind - 1) * 36;
      this.xuanzhuan1 = -Number(zhuan1 + 720)
      this.xuanzhuan2 = Number(zhuan2 + 720)
      return index1
    },

    analyse(e) {
      if (e == '鼠') {
        this.zodiacNumber = 1;
      } else if (e == '牛') {
        this.zodiacNumber = 2;
      } else if (e == '虎') {
        this.zodiacNumber = 3;
      } else if (e == '兔') {
        this.zodiacNumber = 4;
      } else if (e == '龙') {
        this.zodiacNumber = 5;
      } else if (e == '蛇') {
        this.zodiacNumber = 6;
      } else if (e == '马') {
        this.zodiacNumber = 7;
      } else if (e == '羊') {
        this.zodiacNumber = 8;
      } else if (e == '猴') {
        this.zodiacNumber = 9;
      } else if (e == '鸡') {
        this.zodiacNumber = 10;
      } else if (e == '狗') {
        this.zodiacNumber = 11;
      } else if (e == '猪') {
        this.zodiacNumber = 12;
      }

    },

    paoNum(num) {
      let _timer = setInterval(() => {
        this.pao++
        if (this.pao >= 100) {
          clearInterval(_timer)
          this.pao = 0
        }
      }, num / 1000)
    },

    start4() {
      this.paoNum(4000)
      setTimeout(() => {
        this.$set(this.page4List, 0, true)
      }, 500)
      setTimeout(() => {
        this.$set(this.page4List, 1, true)
      }, 1000)
      setTimeout(() => {
        this.$set(this.page4List, 2, true)
      }, 1500)
      setTimeout(() => {
        this.$set(this.page4List, 3, true)
        setTimeout(() => {
          this.page5 = true
          this.page4 = false
          this.textIndex++
          this.start5()
        }, 600)
      }, 2000)
    },
    start5() {
      this.paoNum(4000)
      setTimeout(() => {
        this.$set(this.page5List, 0, true)
      }, 500)
      setTimeout(() => {
        this.$set(this.page5List, 1, true)
      }, 1000)
      setTimeout(() => {
        this.$set(this.page5List, 2, true)
      }, 1500)
      setTimeout(() => {
        this.$set(this.page5List, 3, true)
        setTimeout(() => {
          this.page6 = true
          this.page5 = false
          this.textIndex++
          this.start6()
        }, 600)
      }, 2000)
    },

    start6() {
      this.paoNum(4000)
      setTimeout(() => {
        this.$set(this.page6List, 0, true)
      }, 500)
      setTimeout(() => {
        this.$set(this.page6List, 1, true)
      }, 1000)
      setTimeout(() => {
        this.$set(this.page6List, 2, true)
      }, 1500)
      setTimeout(() => {
        this.$set(this.page6List, 3, true)
        setTimeout(() => {
          this.page7 = true
          this.page6 = false
          this.textIndex++
          this.start7()
        }, 600)
      }, 2000)
    },

    start7() {
      this.paoNum(2000)
      setTimeout(() => {
        this.$set(this.page7List, 0, true)
      }, 500)
      setTimeout(() => {
        this.$set(this.page7List, 1, true)
        setTimeout(() => {
          this.page8 = true
          this.page7 = false
          this.textIndex++
          this.start8()
        }, 600)
      }, 1000)

    },

    start8() {
      this.paoNum(2000)
      setTimeout(() => {
        this.$set(this.page8List, 0, true)
      }, 500)
      setTimeout(() => {
        this.$set(this.page8List, 1, true)
        setTimeout(() => {
          toPage(`/pages/order/order?oid=${this.oid}`,1)
        }, 1000)
      }, 1000)

    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 750rpx;
  height: 100vh;
  overflow: hidden;
  position: relative;

  .mainBg {
    width: 750rpx;
    height: 1146rpx;
    position: absolute;
    top: 0;
    left: 0;
  }

  .title {
    width: 516rpx;
    height: 83rpx;
    position: absolute;
    top: 50rpx;
    left: 117rpx;
  }

  .content {
    width: 690rpx;
    height: 865rpx;
    position: absolute;
    top: 170rpx;
    left: 30rpx;

    .contentBg {
      width: 690rpx;
      height: 865rpx;
      position: absolute;
      top: 0;
      left: 0;
    }

    .contentMain {
      width: 690rpx;
      height: 865rpx;
      position: absolute;
      top: 0;
      left: 0;

      .progress-wrap {
        width: 690rpx;
        margin-left: 36rpx;
        margin-top: 30rpx;

        .progress-title {
          font-size: 34rpx;
          color: #ffffff;
        }

        .progress-bar {
          width: 614rpx;
          height: 20rpx;
          background-color: #4f87bb;
          border-radius: 10rpx;
          margin-top: 40rpx;

          text {
            height: 20rpx;
            background-color: #ffc962;
            border-radius: 10rpx;
            display: block;
            width: 0;
          }
        }
      }

      .tableBox {
        width: 660rpx;
        height: 660rpx;
        margin-left: 18rpx;
        margin-top: 34rpx;

        .tableRow {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20rpx;

          .th {
            width: 151rpx;
            height: 151rpx;
            position: relative;

            .tableItem {
              width: 151rpx;
              height: 151rpx;
              position: relative;

              .tableItemBg {
                width: 151rpx;
                height: 151rpx;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                transition: opacity .5s linear;

                &.active {
                  opacity: 1;
                }
              }

              .tableItemZodiac {
                position: absolute;
                top: 10rpx;
                left: 10rpx;
                width: 127rpx;
                height: 127rpx;
                opacity: 0;
                transition: opacity .5s linear;

                &.active {
                  opacity: 1;
                }
              }

              .tableItemTxt {
                width: 63rpx;
                height: 36rpx;
                position: absolute;
                bottom: 0;
                left: 0;
                opacity: 1;

                &.active {
                  display: block;
                  top: 0;
                  right: 0;
                  left: unset;
                }

                .tableItemTxtBg {
                  width: 63rpx;
                  height: 36rpx;
                  position: absolute;
                  bottom: 0;
                  left: 0;
                }

                .tableItemTxtTxt {
                  width: 63rpx;
                  height: 36rpx;
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  text-align: center;
                  line-height: 36rpx;
                  font-size: 20rpx;
                  color: #ffffff;
                }
              }
            }
          }
        }
      }

      .tableCenter {
        width: 260rpx;
        height: 260rpx;
        padding: 30rpx;
        position: absolute;
        top: 330rpx;
        left: 186rpx;
        background-color: #dde9f6;
        border-radius: 10rpx;
        border: solid 4rpx #68b2ee;

        .tableCenterTxt {
          width: 100%;
          font-size: 28rpx;
          color: #26639d;
          margin-bottom: 30rpx;
          line-height: 1.5;
          opacity: 0;
          transition: opacity 1s;

          &.active {
            opacity: 1;
          }

          text {
            font-weight: bold;
          }
        }
      }

      .info2 {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        text-align: center;
        position: absolute;
        top: 170rpx;
        left: 0;

        .zs {
          width: 100%;
          height: 80rpx;
          background-color: rgba(140, 191, 240, 0.5);
          position: absolute;
          top: 0;
          left: 0;
        }

        .item {
          width: 25%;
          opacity: 0;
          transition: opacity 0.5s;
          position: relative;
          z-index: 2;

          &.active {
            opacity: 1;
          }

          .tit {
            height: 80rpx;
            line-height: 80rpx;
            font-weight: 600;
            background-color: rgba(140, 191, 240, 0);
            color: #ffc962;
            font-size: 34rpx;
            margin-bottom: 30rpx;
          }

          .inf {
            color: #fefefe;
            font-size: 36rpx;

            view {
              padding-bottom: 10rpx;
            }
          }
        }
      }

      .info1 {
        position: absolute;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        text-align: center;
        padding-top: 50rpx;
        .item {
          width: 40%;
          height: 56rpx;
          text-align: center;
          line-height: 56rpx;
          border-radius: 28rpx;
          border: solid 2rpx #65abeb;
          opacity: 0;
          transition: opacity 0.7s;

          &.active {
            opacity: 1;
          }

          .key {
            font-size: 34rpx;
            color: #ffffff;
            line-height: 56rpx;
          }
        }
      }

      .info0 {
        position: absolute;
        width: 100%;
        box-sizing: border-box;
        padding-top: 50rpx;
        .item {
          width: 90%;
          margin-left: 5%;
          height: 68rpx;
          text-align: center;
          line-height: 68rpx;
          border-radius: 28rpx;
          padding: 0 20rpx;
          box-sizing: border-box;
          border: solid 2rpx #65abeb;
          opacity: 0;
          transition: opacity 0.7s;
          margin-bottom: 30rpx;

          &.active {
            opacity: 1;
          }

          .key {
            font-size: 34rpx;
            color: #ffffff;
            line-height: 68rpx;
          }
        }
      }


      .rotate {
        position: absolute;
        width: 550rpx;
        height: 550rpx;
        left: 0;
        right: 0;
        margin: auto;
        top: 420rpx;

        .waibg {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 550rpx;
          height: 550rpx;
        }

        .dzchoose {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 550rpx;
          height: 550rpx;
          opacity: 0;
          transition: opacity 1s;

          &.active {
            opacity: 1;
          }
        }

        .cenbg {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 387rpx;
          height: 387rpx;
        }

        .tgchoose {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 387rpx;
          height: 387rpx;
          opacity: 0;
          transition: opacity 1s;

          &.active {
            opacity: 1;
          }
        }

        .neibg {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 233rpx;
          height: 233rpx;
        }

        .xin {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 110rpx;
          height: 110rpx;
          animation: zhuan 5s linear infinite;
        }

        > view {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;

          &.dz {
            width: 550rpx;
            height: 550rpx;
            transform: rotate(0deg);
            transition: transform 1s ease;

            &.active {
              animation: rotate1 1.5s linear infinite;
            }

            > view {
              position: absolute;
              font-size: 32rpx;
              width: 550rpx;
              height: 550rpx;
              box-sizing: border-box;
              padding-top: 27rpx;
              line-height: 40rpx;
              text-align: center;
              color: #c26811;
            }
          }

          &.tg {
            width: 387rpx;
            height: 387rpx;
            transform: rotate(0deg);
            transition: transform 1s ease;

            &.active {
              animation: rotate 1.5s linear infinite;
            }

            > view {
              width: 387rpx;
              height: 387rpx;
              position: absolute;
              font-size: 30rpx;
              box-sizing: border-box;
              padding-top: 23rpx;
              line-height: 40rpx;
              text-align: center;
              color: #ffedc3;
            }

          }

          &.nyr {
            width: 233rpx;
            height: 233rpx;
            transition: transform 1s;

            > view {
              position: absolute;
              font-size: 31rpx;
              width: 233rpx;
              height: 233rpx;
              box-sizing: border-box;
              padding-top: 18rpx;
              line-height: 40rpx;
              text-align: center;
              color: #ce3820;
            }
          }
        }


      }

    }

  }
}
</style>
